<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝网-淘！我喜欢</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .body{
            background-color: silver;
        }
        .top{
            width: 100%;
            height: 30px;
            background-color: #F5F5F5;
        }
        .top ul>li{
            list-style: none;
            margin: 7px 10px 0px 20px;
            float: left;
            font-size: 12px;
        }
        a:link{
            color: black;
            text-decoration:none;
        }
        a:visited{
            color: black;
        }
        a:hover{
            color: orangered;
        }
        .top span {
            color: red;
        }
        .ss{
            margin:50px 0px 0px 100px;
            width: 1300px;
            height: 100px;
            padding: 10px 0px 0px 50px;
        }
        
        .a{
            margin-left: 100px;
            width: 700px;
            height: 40px;
            border: 1px solid orange;
            border-radius: 50px;
            background-color: white;
            float: left;
        }
        .a1{
            width: 70px;
            height: 20px;
            float: left;
            margin: 10px 0px 0px 10px; 
            background-color: white;
            border-right: 1px solid  silver;
        }
        .a2{
            float: left;
            background-color: white;
        }
        .a2 input{
            margin: 10px 0px 0px 10px;
            font-size: 16px;
            width: 500px;
            background: transparent;
            border:1px solid #ffffff
        }
        .a3{
            margin: 3px 20px 0px 0px;
            padding: 5px 0px 0px 10px;
            height: 30px;
            width: 50px;
            float: right;
            border-radius: 50px;
            background-color: orange;
            color: white;
        }
        .bottom{
            margin: 20px 50px 100px 100px;
            width: 1300px;
            height: 700px;
            border-radius: 50px;
            background-color: white;
        }
        .b li{
            list-style: none;
            float: left;
            margin: 20px 10px 0px 10px;
        }
        .f{
            color: orange;
            padding-left: 40px;
            padding-right: 100px;

        }
        .f1 a:visted{
            color: #ff826a;
        }
        .f2 a:visted{
            color: #ff0036;
        }
        .f3 a:visited{
            color: #33c984;

        }
        .b1 li{
            list-style: none;
            padding-top: 15px;
            padding-left: 10px;
        }
        .b2{
            float:left;
            margin: -500px 0px 0px 230px;
        }
        .b3{
            float: right;
            margin: -500px 380px 0px 0px;
        }
        .b4{
            width: 360px;
            height: 300px;
            float: right;
            margin: -500px 10px 0px 0px;
        }
        .b4 li{
            float: left;
            list-style: none;
            margin-left: 30px;
        }
        .b5{
            float: left;
            margin: -200px 0px 0px 230px;
        }
        .b6{
            float: right;
            margin: -200px 380px 0px 0px;
        }
        .b7{
            float: right;
            margin: -200px 10px 0px 0px;
        }
    </style>
</head>
<body>
    <div class="body">
        <div class="top">
            <ul>
                <li><a href="#">中国大陆</a></li>
                <li><a href="#"><span>亲，请登录</span></a></li>
                <li><a href="#">免费注册</a></li>
                <li><a href="#">手机逛淘宝</a></li>
            </ul>

            <ul style="float: right;">
                <li><a href="#">我的淘宝</a></li>
                <li><a href="#">购物车</a></li>
                <li><a href="#">收藏夹</a></li>
                <li><a href="#">商品分类</a></li>
                <li><a href="#">免费开店</a></li>
                <li>|</li>
                <li><a href="#">千牛卖家中心</a></li>
                <li><a href="#">联系客服</a></li>
                <li><a href="#">网站导航</a></li>
            </ul>
        </div>
        <div class="ss">
                        <div style="float: left;"><img src="image/淘宝网 (1).svg" alt=""></div>
                        <div class="a">
                            <div class="a1">
                                宝贝
                            </div>
                            <div class="a2">
                                <input type="text" placeholder="食用油非转基因">
                            </div>
                            <div class="a3">
                                搜索 
                            </div>
                        </div>
                        <img src="image/二维码.png" style="height: 80px;">
                    </div>
                    <div class="bottom">
                        <ul class="b">
                            <li class="f">主题市场</li>
                            <li class="f1"><a href="#">天猫</a></li>
                            <li class="f2"><a href="#">聚划算</a></li>
                            <li class="f3"><a href="#">天猫超市</a></li>
                            <li>|</li>
                            <li><a href="">司法拍卖</a></li>
                            <li><a href="">飞猪旅行</a></li>
                            <li><a href="">天天特卖</a></li>
                            <li><a href="">淘小铺</a></li>
                            <li>|</li>
                            <li><a href="">造点新货</a></li>
                            <li><a href="">苏宁易购</a></li>
                            <li><a href="">淘宝心选</a></li>
                            <li><a href="">智能生活</a></li>
                        </ul>
                        <br><br>
                        <ul class="b1">
                            <li><a href="">女装</a> / <a href="">内衣</a> / <a href="">家具</a><span>></span></li>
                            <li><a href="">女童</a> / <a href="">男鞋</a> / <a href="">箱包</a><span>></span></li>
                            <li><a href="">母婴</a> / <a href="">童装</a> / <a href="">玩具</a><span>></span></li>
                            <li><a href="">男装</a> / <a href="">运动户外</a><span>></span></li>
                            <li><a href="">美妆</a> / <a href="">彩妆</a> / <a href="">个护</a><span>></span></li>
                            <li><a href="">手机</a> / <a href="">数码</a> / <a href="">企业</a><span>></span></li>
                            <li><a href="">大家电</a> / <a href="">生活电器</a><span>></span></li>
                            <li><a href="">零食</a> / <a href="">生鲜</a> / <a href="">茶酒</a><span>></span></li>
                            <li><a href="">厨具</a> / <a href="">收纳</a> / <a href="">清洁</a><span>></span></li>
                            <li><a href="">家纺</a> / <a href="">家饰</a> / <a href="">鲜花</a><span>></span></li>
                            <li><a href="">图书音像</a> / <a href="">文具</a><span>></span></li>
                            <li><a href="">医药保健</a> / <a href="">进口</a><span>></span></li>
                            <li><a href="">汽车</a> / <a href="">二手车</a> / <a href="">用品</a><span>></span></li>
                            <li><a href="">房产</a> / <a href="">装饰家具</a> / <a href="">建材</a><span>></span></li>
                            <li><a href="">手表</a> / <a href="">眼镜</a> / <a href="">珠宝饰品</a><span>></span></li>
                        </ul>
                        <div class="b2"><img src="image/dt1.jpg" style="border-radius: 20px;"></div>
                        <div class="b3"><img src="image/618.jpg" style="border-radius: 20px;"></div>
                        <div class="b4">
                            <img src="image/你好.png" alt="">
                            <ul>
                                <li><a href="">公告</a></li>
                                <li><a href="">规则</a></li>
                                <li><a href="">安全</a></li>
                                <li><a href="">公益</a></li>
                                <li><a href="">千牛</a></li>
                            </ul>
                        </div>
                        <div class="b5">TMLL天猫 理想生活上天猫 <span style="float: right;">1/5</span>  <div class="g"><img src="image/天猫.png" style="height: 200px; float: left;"></div></div>
                        <div class="b6">今日特卖<div class="g"><img src="image/5折.jpg" style=" float: left; border-radius: 20px;"></div></div>
                        <div class="b7"><div class="g"><img src="image/阿里.png" style=" float: left; width: 300px;"></div></div>
                    </div>
    </div>
    
</body>
</html>